<template>
    <div>
        <div>
            <Row :gutter="16">
                <Col :span="4">
                <div>
                    <Button type="primary" icon="ios-add" long @click="addgroup()">添加分组</Button>
                    <!-- <div class="weui-desktop-popover">
                        <div class="ivu-mb-16 ivu-mt-8 fontstyle" >请输入分组名字</div>
                        <Input />
                        <div class="ivu-mt-16">
                            <Button class="ivu-ml-16" type="primary" @click="saveGroup()" >确定</Button>
                            <Button class="ivu-ml-16" >取消</Button>
                        </div>
                    </div> -->
                    <template v-for="(item) in tagList"  >
                        <div :key="item.id" class="tagstyle mytag"  :class="params.groupId == item.id?'primary':'default'"  style="padding: 10px 0;"  @click="changeTag(item)"  @mouseleave="chengeleave(item)" @mouseenter="chengeenter(item)">
                            <span v-if="!item.showname">{{item.name}}</span>
                            <Input  v-else v-model="name" placeholder="" style="width: 100px"  @on-blur="submitinput(item)"/>
                            <Icon @click.stop="chengeicon(item)" v-show="item.show" class="icon" type="ios-settings" />
                            <div v-show="item.isshow" class="ivu-mt-8 ivucar" >
                                <div class="ivu-mt-8" @click.stop="chengedit(item)" ><Icon type="md-create" />编辑</div>
                                <div class="ivu-mt-8" @click.stop="changedelete(item)"><Icon type="ios-trash" />删除</div>
                            </div>
                        </div>
                    </template>
                </div>
                </Col>
                <Col :span="20" class="cardscroll">
                <Scroll v-if="data.length"  :on-reach-bottom="handleReachBottom" :height="height" :distance-to-edge="[1,1]">
                    <Row :gutter="8" type="flex">
                        <template v-for="(item,index) in data">
                            <Col >
                            <div style=" position: relative;" @mouseenter="cardenter(item)" @mouseleave="cardleave(item)" :key="index">
                                <Card class="ivu-mb-16" v-width="250"   >
                                    <div class="imageurl" >
                                        <img :src="item.path" alt="" class="canvasImg" >
                                    </div>
                                    <Row class="showtype" v-show="item.typeShow">
                                        <Col ><Icon type="md-create"  @click.stop="imgedit(item)"/></Col>
                                        <Col class="ivu-ml-16 ivu-mr-8"><Icon type="ios-trash"  @click.stop="imgdelete(item)" /></Col>
                                    </Row>
                                    <div v-if="!item.imagenameShow" style="text-align: center;">{{item.name}}</div>
                                    <Input v-else  v-model="imgname" placeholder=""   @on-blur="imgsubmit(item)"/>
                                </Card>
                            </div>
                            </Col>
                        </template>
                    </Row>
                    <div v-if="Message " style="display: flex;align-items: center;justify-content: center;color: #aaa;">被你看完了</div>
                </Scroll>
                <div v-else style="height:300px;display: flex;align-items: center;justify-content: center;color: #aaa;">暂无数据</div>
                </Col>
            </Row>
        </div>
        <!-- modal -->
        <Modal v-model="modal" width="360" :closable="false">
            <div class="weui-desktop-popover">
                <div class="ivu-mb-16 ivu-mt-8 fontstyle" >请输入分组名字</div>
                <Input v-model="groupname" />
            </div>
            <div class="ivu-mt-16" slot="footer">
                <Button class="ivu-ml-16" type="primary" @click="saveGroup()" >确定</Button>
                <Button class="ivu-ml-16" @click="savecalel()">取消</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import {
        wechatupdateMedia,
        wechatdelMedia,
        wechataddGroup,
        wechatdelGroup,
        wechatselectGroup,
        mediaList
    } from '@/api/public.js'
    export default {
        data () {
            return {
                params: { groupId: 0, page: 1, pageSize: 24, type: 1,wechatId:'' },
                tagList: [
                    // {
                    //     id: 0,
                    //     name: '全部'
                    // },
                    // {
                    //     id: 1,
                    //     name: '未分组1',
                    //     show: false,
                    //     isshow: false,
                    //     showname: false
                    // },
                    // {
                    //     id: 2,
                    //     name: '未分组2',
                    //     show: false,
                    //     isshow: false,
                    //     showname: false

                    // }

                ],
                height: null,
                data: [
                    // {
                    //     path: 'http://sckimg1-test.ahjgyl.com/newImgs/img/d196a23554b749aaa85064290b653991.png'
                    // },
                    // {
                    //     path: 'http://sckimg1-test.ahjgyl.com/newImgs/img/d196a23554b749aaa85064290b653991.png'
                    // },
                    // {
                    //     path: 'http://sckimg1-test.ahjgyl.com/newImgs/img/d196a23554b749aaa85064290b653991.png'
                    // }

                ],
                name: '',
                imgname: '',
                total: 0,
                Message: false,
                modal: false,
                groupname:'',
                // isshow: false
            }
        },
        mounted () {
            // this.$nextTick(() => {
            //     setTimeout(() => {
            //         this.height = document.documentElement.clientHeight - 590 - this.$refs.cardbox.$el.offsetHeight
            //     }, 100)
            // });

        },
        methods: {
            initial (name) {
                this.params.wechatId = name
                console.log(name, 'name')
                if (name) {
                    this.getwechatgroup(name)
                    this.askData()
                }
            },
            changeTag (item) {
                this.params.groupId = item.id
            },
            // 分组列表
            getwechatgroup (val) {
                wechatselectGroup({ wechatId: val }).then(res => {
                    this.tagList = res
                })
            },
            // 添加分组
            addgroup () {
                //
                this.modal = true
            },
            // 添加分组确定
            saveGroup () {
                let params={
                    wechatId:this.params.wechatId,
                    name:this.groupname
                }
                if(this.groupname){
                    wechataddGroup(params).then(res=>{
                        this.$Message.success('新增分组成功')
                        this.savecalel()
                        this.getwechatgroup(this.params.wechatId)
                    }).catch(() => {
                        this.savecalel()
                    });
                }else{
                    this.$Message.error('请填写分组后在保存')
                }
               
            },
            savecalel(){
                this.modal = false
                this.groupname=''
            },
            chengeenter (item) {
                item.show = true
            },
            chengeleave (item) {
                item.show = false
                item.isshow = false
            },
            chengeicon (item) {
                item.isshow = true
            },
            // 编辑
            chengedit (item) {
                item.showname = true
                this.name = ''
            },
            // 编辑保存
            submitinput (item) {
                if (this.name !== '') {
                    item.name = this.name
                    item.showname = false
                }
            },
            changedelete (item) {
                this.$Modal.confirm({
                    title: '确定删除当前分组吗？',
                    // content: '<p>Content of dialog</p><p>Content of dialog</p>',
                    onOk: () => {
                        // imgdel({ id: item.id }).then(res => {
                        //     this.$Message.info('删除成功');
                        //     this._getimgList()
                        // }).catch(() => {
                        //     // this.$Message.error('删除失败')
                        // })
                    },
                    onCancel: () => {
                        // this.$Message.error('')
                    }
                })
            },
            askData () {
                // this.params.remark = this.remark
                // this.show = true
                this.Message = false
                mediaList(this.params).then(res => {
                    this.data = res.list.length>0 ? res.list.map(item => ({ ...item, typeShow: false, name: '111', imagenameShow: false })) : []
                    this.total = res.total
                    this.$nextTick(() => {
                        setTimeout(() => {
                            // this.height = document.documentElement.clientHeight - 320 - this.$refs.cardbox.$el.offsetHeight
                        }, 100)
                    });
                })
            },
            // 图片操作部分
            cardenter (item) {
                item.typeShow = true
            },
            cardleave (item) {
                item.typeShow = false
            },
            // 编辑
            imgedit (item) {
                item.imagenameShow = true
            },
            // 删除
            imgdelete (item) {
                this.$Modal.confirm({
                    title: '确定将当前图片删除移入回收站？',
                    // content: '<p>Content of dialog</p><p>Content of dialog</p>',
                    onOk: () => {
                        // imgdel({ id: item.id }).then(res => {
                        //     this.$Message.info('删除成功');
                        //     this._getimgList()
                        // }).catch(() => {
                        //     // this.$Message.error('删除失败')
                        // })
                    },
                    onCancel: () => {
                        // this.$Message.error('')
                    }
                })
            },
            imgsubmit (item) {
                item.name = this.imgname
                item.imagenameShow = false
            },
            // 图片加载
            handleReachBottom () {
                if (this.total > this.params.pageSize * this.params.page) {
                    this.params.page++
                    this.askDatas()
                } else {
                    this.Message = true
                }
            },
            askDatas () {
                // this.params.remark = this.remark
                // this.show = true
                materialimgimglist(this.params).then(res => {
                    const list = res.list.map(item => ({ ...item, typeShow: false, name: '111', imagenameShow: false }))
                    this.data.push(...list)
                })
            }
        }
    }
</script>

<style lang="less" scoped>
// .weui-desktop-popover {
//     width: 280px;
//     position: absolute;
//     z-index: 500;
//     text-align: left;
//     color: var(--weuiDesktop_FG_Text_globalColor);
//     line-height: var(--weuiDesktop_globalLineHeight);
//     white-space: normal;
//     word-wrap: break-word;
//     -webkit-hyphens: auto;
//     -ms-hyphens: auto;
//     hyphens: auto;
//     background-color: #fff;
//     box-shadow: 0 1px 6px #ccc;
//     border-radius: 5px;
// }
.fontstyle{
    font-weight: bolder;
    text-align: center;
}
.imageurl{
    width: 100%;
    height: 250px;
    .canvasImg{
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}
/deep/.ivu-modal-footer{
    text-align: center
}
   @import "../../../styles/mystyle.less";
.mytag{
    text-align: center;
    position: relative;
}
.icon{
    position: absolute;
    top: 15px;
    right:8px;
}
.ivucar{
    display: flex;
    border-top: 1px solid #999;
    padding:3px 37px;
    justify-content: space-around;
}
/deep/ .ivu-scroll-container {
    max-height: 571px !important;
    overflow-x: hidden;
    overflow-y: auto;
}
//编辑删除
.showtype{
        position: absolute;
        background: #515a6e;
        font-size: 20px;
        opacity: .5;
        color: #fff;
        width: 100%;
        height: 35px;
        left: 0px;
        top:0px;
        justify-content: right;
        // display: none;
    }
    // &:hover{
    //     .showtype{
    //         display: block;
    //     }
    // }
</style>
